<template>
  <div class="dify-container">
    <div class="dify-iframe-wrapper">
      <iframe 
        ref="difyFrame"
        :src="difyUrl"
        class="dify-iframe"
        frameborder="0"
        @load="onIframeLoad"
        @error="onIframeError"
      ></iframe>
    </div>
    <div v-if="loading" class="loading">
      <el-icon class="is-loading" style="margin-right: 8px;"><Loading /></el-icon>
      <span>正在加载 Dify 聊天机器人...</span>
    </div>
    <div v-if="error" class="error-message">
      <p>加载 Dify 聊天机器人时出错：{{ error }}</p>
      <el-button type="primary" @click="retryLoad">重试</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref(true);
const error = ref('');
const difyFrame = ref<HTMLIFrameElement | null>(null);
const difyUrl = ref('/dify-chat.html');

const onIframeLoad = () => {
  console.log('Dify iframe loaded successfully');
  loading.value = false;
  error.value = '';
};

const onIframeError = (e: Event | string) => {
  const errorMsg = typeof e === 'string' ? e : 
                  e instanceof Error ? e.message : 
                  '未知错误';
  
  console.error('Failed to load Dify:', e);
  error.value = `无法加载 Dify 聊天界面: ${errorMsg}`;
  loading.value = false;
};

const retryLoad = () => {
  error.value = '';
  loading.value = true;
  
  if (difyFrame.value) {
    // 强制刷新 iframe
    difyFrame.value.src = difyUrl.value + (difyUrl.value.includes('?') ? '&' : '?') + 't=' + Date.now();
  }
};

// 初始化
onMounted(() => {
  // 添加一个超时检测
  const timer = setTimeout(() => {
    if (loading.value) {
      error.value = '加载超时，请检查网络连接';
      loading.value = false;
    }
  }, 10000);

  return () => clearTimeout(timer);
});
</script>

<style scoped>
.dify-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 64px);
  min-height: 500px;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;
}

.dify-iframe-wrapper {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.dify-iframe {
  flex: 1;
  width: 100%;
  min-height: 500px;
  border: none;
  background: white;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dify-container {
    height: calc(100vh - 56px);
    min-height: 400px;
  }
  
  .dify-iframe {
    margin: 8px;
    min-height: 400px;
  }
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 16px 24px;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: white;
  padding: 24px 32px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  max-width: 90%;
  width: 400px;
  z-index: 10;
}

.error-message p {
  margin-bottom: 20px;
  color: #f56c6c;
  font-size: 15px;
  line-height: 1.5;
}

/* 确保按钮样式一致 */
.error-message .el-button {
  margin-top: 10px;
  min-width: 100px;
  padding: 10px 20px;
}

.el-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
